"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Music, Disc, ListMusic, Film } from "lucide-react"
import { SongCard } from "@/components/song-card"
import { AlbumCard } from "@/components/album-card"
import { PlaylistCard } from "@/components/playlist-card"
import { MVCard } from "@/components/mv-card"
import { EmptyState } from "./empty-state"
import { SongCardSkeleton } from "../skeletons/song-card-skeleton"
import { AlbumCardSkeleton } from "../skeletons/album-card-skeleton"
import { PlaylistCardSkeleton } from "../skeletons/playlist-card-skeleton"
import { MVCardSkeleton } from "../skeletons/mv-card-skeleton"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import type { Song } from "@/types/song"
import type { Album } from "@/types/album"
import type { Playlist } from "@/types/playlist"
import type { MV } from "@/types/mv"
import { IoMusicalNotes } from "react-icons/io5";
import { FaCompactDisc } from 'react-icons/fa';
import { FaVideo } from 'react-icons/fa'; // 使用视频图标
interface LikesTabProps {
    songs: Song[]
    albums: Album[]
    playlists: Playlist[]
    mvs: MV[]
    isLoading?: boolean
}


export function LikesTab({ songs, albums, playlists, mvs, isLoading = false }: LikesTabProps) {
    return (
        <Tabs defaultValue="songs" className="w-full">
            <TabsList className="w-full bg-muted/50 p-1">
                <TabsTrigger value="songs" className="flex items-center gap-2">
                    <Music className="h-4 w-4" />
                    歌曲
                </TabsTrigger>
                <TabsTrigger value="albums" className="flex items-center gap-2">
                    <Disc className="h-4 w-4" />
                    专辑
                </TabsTrigger>
                <TabsTrigger value="playlists" className="flex items-center gap-2">
                    <ListMusic className="h-4 w-4" />
                    歌单
                </TabsTrigger>
                <TabsTrigger value="mvs" className="flex items-center gap-2">
                    <Film className="h-4 w-4" />
                    MV
                </TabsTrigger>
            </TabsList>

            <TabsContent value="songs" className="mt-6">
                {isLoading ? (
                    <div className="space-y-2">
                        {Array(5)
                            .fill(0)
                            .map((_, i) => (
                                <SongCardSkeleton key={i} />
                            ))}
                    </div>
                ) : songs.length > 0 ? (
                    <>
                        <div className="space-y-2">
                            {songs.map((song,index) => (
                                <SongCard key={song.id} song={song} index={index+1}/>
                            ))}
                        </div>
                        {songs.length >= 10 && (
                            <div className="mt-6 flex justify-center">
                                <Button variant="outline" asChild>
                                    <Link href="/my/songs">查看全部</Link>
                                </Button>
                            </div>
                        )}
                    </>
                ) : (
                    <EmptyState
                        icon={<Music className="h-16 w-16 text-blue-500" />}  // 使用蓝色图标，类似QQ音乐
                        title="暂无喜欢的歌曲"
                        description="开始探索和收藏你喜欢的音乐吧"
                        className="bg-gradient-to-r from-blue-500 to-teal-500 text-white p-8 rounded-lg shadow-xl"  // 深色背景，渐变蓝色到青色，白色文本
                    />

                )}
            </TabsContent>

            <TabsContent value="albums" className="mt-6">
                {isLoading ? (
                    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
                        {Array(10)
                            .fill(0)
                            .map((_, i) => (
                                <AlbumCardSkeleton key={i} />
                            ))}
                    </div>
                ) : albums.length > 0 ? (
                    <>
                        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
                            {albums.map((album) => (
                                <AlbumCard key={album.id} album={album} />
                            ))}
                        </div>
                        {albums.length >= 10 && (
                            <div className="mt-6 flex justify-center">
                                <Button variant="outline" asChild>
                                    <Link href="/my/albums">查看全部</Link>
                                </Button>
                            </div>
                        )}
                    </>
                ) : (
                    <EmptyState
                        icon={<FaCompactDisc className="h-16 w-16 text-yellow-400" />}  // 使用专辑图标，并选择黄色作为图标颜色
                        title="暂无喜欢的专辑"
                        description="开始探索和收藏你喜欢的专辑吧"
                        className="bg-gradient-to-r from-purple-500 to-blue-500 text-white p-8 rounded-lg shadow-lg"  // 渐变背景，从紫色到蓝色，白色文本
                    />
                )}
            </TabsContent>

            <TabsContent value="playlists" className="mt-6">
                {isLoading ? (
                    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
                        {Array(10)
                            .fill(0)
                            .map((_, i) => (
                                <PlaylistCardSkeleton key={i} />
                            ))}
                    </div>
                ) : playlists.length > 0 ? (
                    <>
                        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
                            {playlists.map((playlist) => (
                                <PlaylistCard key={playlist.id} playlist={playlist} showCreator={true}/>
                            ))}
                        </div>
                        {playlists.length >= 10 && (
                            <div className="mt-6 flex justify-center">
                                <Button variant="outline" asChild>
                                    <Link href="/my/playlists">查看全部</Link>
                                </Button>
                            </div>
                        )}
                    </>
                ) : (
                    <EmptyState
                        icon={<IoMusicalNotes className="h-16 w-16 text-pink-500" />}  // 使用音符图标，颜色选择温暖的粉红色
                        title="暂无喜欢的歌单"
                        description="开始探索和收藏你喜欢的歌单吧"
                        className="bg-gradient-to-r from-yellow-300 to-orange-400 text-white p-8 rounded-lg shadow-lg" // 背景颜色渐变，从浅黄色到橙色，文本为白色
                    />
                )}
            </TabsContent>

            <TabsContent value="mvs" className="mt-6">
                {isLoading ? (
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                        {Array(8)
                            .fill(0)
                            .map((_, i) => (
                                <MVCardSkeleton key={i} />
                            ))}
                    </div>
                ) : mvs.length > 0 ? (
                    <>
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                            {mvs.map((mv) => (
                                <MVCard key={mv.id} mv={mv} />
                            ))}
                        </div>
                        {mvs.length >= 10 && (
                            <div className="mt-6 flex justify-center">
                                <Button variant="outline" asChild>
                                    <Link href="/my/mvs">查看全部</Link>
                                </Button>
                            </div>
                        )}
                    </>
                ) : (
                    <EmptyState
                        icon={<FaVideo className="h-16 w-16 text-blue-500" />}  // 使用播放图标，颜色选择明亮的蓝色
                        title="暂无喜欢的MV"
                        description="开始探索和收藏你喜欢的MV吧"
                        className="bg-gradient-to-br from-purple-400 to-pink-500 text-white p-8 rounded-lg shadow-lg" // 背景颜色渐变，从紫色到粉红色，文本为白色
                    />
                )}
            </TabsContent>
        </Tabs>
    )
}

